<template>
        <div class="songs" @click="playSong(songdata.index)">
            <p class="songname">{{songdata.name}}</p>
            <p>
                <span class="artist" v-for="(art,index) in songdata.artist" :key="index">
                    <span v-if="index!==0">/</span>{{art.name}}
                </span>
                <span class="album"> - {{songdata.album.name}}</span>
            </p>
        </div>
</template>


<script>
export default {
    props:[ "songdata","songlist"],
    methods: {
        playSong(index){
            var id = this.songlist[index].id;
            console.log(id);
            
            this.$store.commit("getSonglist",{songlist:this.songlist,index:index});

            this.player.playSong(`http://music.163.com/song/media/outer/url?id=${id}.mp3`);
            this.$store.commit("changeSong",this.songdata);
            // 获取专辑图片
            this.axios("/album",{params:{id:this.songdata.album.id}}).then((res)=>{
                this.$store.commit("changeAlbum", res.data.album.picUrl);
            })
        }
    }
}
</script>



<style lang="scss" scoped>
.songs{
    width: 100%;
    padding: 5px;
    border-bottom: 1px solid #c8c8c8;
    .songname{
        font-size: 14px;
    }
    .artist,.album{
        font-size: 12px;
        color:#666;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    p{
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 12px;
        color:#1a1a1a;
    }
}
</style>


